<template>
    <div>
        <div class="menu_top">
            <el-tag
                :key="item.name"
                v-for="(item,index) in tags"
                :closable='item.name !== "home"'
                type="info"
                :color="$route.name !== item.name ? 'white' : '' "
                :disable-transitions="true"
                @close="handleClose(item,index)"
                @click="changeMenu(item)"
               >
                {{item.title}}
            </el-tag>
        </div>

    </div>
</template>

<script>
import { mapState,mapMutations } from "vuex";
    export default {
        computed: {
           ...mapState({      //vuex获取点击获取到菜单按钮         :class="$route.name === item.name ? 'backg' : 'backg2 el-tag el-tag--info el-tag__close' "     
               tags: state => state.tab.tabList
           })
        },
        data(){
            return {
                inputVisible: false,
                inputValue: ''
            }
        },
        methods:{
          ...mapMutations({     //引用vuex方法
            close: 'closeTab'   //vuex 的删除菜单按钮方法 赋给 close
          }),
          handleClose(tag, index) {
            let lenght = this.tags.lenght - 1;
            this.close(tag);   //调用方法进行删除
            //跳转路由
            if(tag.name !== this.$route.name) {
               return;
            } 
            if (index === lenght) {    
               this.$router.push({
                 name: this.tags[index-1].name
               });
            }else {
              this.$router.push({ name: this.tags[index-1].name } )
            }        
          },  
          changeMenu(item){   //vuex存储导航菜单
             this.$router.push({ name: item.name });  //页面路由跳转
             this.$store.commit('selectMenu',item);    //调用vuex的mutations里面的selectMenu方法点击获取菜单栏
          }
        }
    }
</script>

<style scoped>
  .backg{
     background-color: #409EFF;
     color: #fff;
     border: none;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 32px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .menu_top{
    padding: 2px 0;
    height: 31px;
    box-shadow: 2px 2px 2px 2px #f1f0f0;
  }
 .menu_top .el-tag {
    margin-right: -5px;
  }
</style>
<style>
.menu_top .el-tag {
   cursor: pointer;
   line-height: 32px;
   border-radius: 0;
}
</style>